import React, { PureComponent } from 'react'
import { Modal, Form, Input, Select } from 'antd'
import PropTypes, { bool } from 'prop-types'

// import Style from './invoiceModal.css'

const { Option } = Select
const { TextArea } = Input
class invoiceModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    confirmLoading: bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    form: PropTypes.any,
    init: PropTypes.any
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }
  confirmSubmit = () => {
    console.log('submit')
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        onOk({
          ...values,
          amount: values.amount * 100
        })
      }
    })
  }

  render () {
    const { visible, onCancel, form, confirmLoading, init } = this.props
    const { invoiceType, titleType, invoiceTitle, content, no, mobile, email, amount } = init || {}
    const { getFieldDecorator, getFieldValue } = form
    const isOrg = getFieldValue('titleType') === 'company'
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    return (
      <Modal
        title='修改发票信息'
        visible={visible}
        onCancel={onCancel}
        confirmLoading={confirmLoading}
        onOk={this.confirmSubmit}
      >
        <Form {...formItemLayout}>
          <Form.Item label='发票类型'>
            {getFieldDecorator('invoiceType', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: invoiceType
            })(<Select >
              <Option value='digit' >电子发票</Option>
              <Option value='paper' >纸质发票</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label='抬头类型'>
            {getFieldDecorator('titleType', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: titleType
            })(<Select>
              <Option value='person'>个人</Option>
              <Option value='company'>企业</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label='发票抬头'>
            {getFieldDecorator('invoiceTitle', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: invoiceTitle
            })(<Input />)}
          </Form.Item>
          <Form.Item label='发票内容'>
            {getFieldDecorator('content', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: content
            })(<Select >
              <Option value='艺术品'>艺术品</Option>
              {/* <Option value={2} >艺术品</Option> */}
            </Select>)}
          </Form.Item>
          <Form.Item label='发票金额'>
            {getFieldDecorator('amount', {
              rules: [{ required: true, message: '请输入' }, { pattern: /^\d*\.?\d*$/, message: '请输入正确的金额' }],
              initialValue: (amount || 0) / 100
            })(<Input prefix='¥' />)}
          </Form.Item>
          {isOrg &&
            <Form.Item label='税号'>
              {getFieldDecorator('no', {
                rules: [{ required: true, message: '请输入' }],
                initialValue: no
              })(<Input />)}
            </Form.Item>
          }
          <Form.Item label='收票人手机'>
            {getFieldDecorator('mobile', {
              rules: [{ required: true, message: '请输入' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }],
              initialValue: mobile
            })(<Input />)}
          </Form.Item>
          <Form.Item label='收票人邮箱'>
            {getFieldDecorator('email', {
              rules: [{ required: true, message: '请输入' }, { type: 'email', message: '请输入正确的邮箱格式' }],
              initialValue: email
            })(<Input />)}
          </Form.Item>
          <Form.Item label='修改原因'>
            {getFieldDecorator('changeReason', {
              rules: [{ required: true, message: '请输入' }]
            })(<TextArea />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(invoiceModal)
